/*****************************************************************************************
 * floatz.form.css
 * ---------------------------------------------------------------------------------------
 * Provides a common baseline as well as specific classes for form elements
 *
 * @project       floatz CSS Framework
 * @version       1.2.0
 * @see           http://code.google.com/p/floatz/
 * @author        Harald Humml
 * @copyright     Copyright (c) 1998-2013 by :humml:design
 * @link          http://www.floatzcss.com
 * @license       Apache License 2.0 http://www.apache.org/licenses/LICENSE-2.0
 * @lastmodified  2013-02-22
 * @since         1.0.0
 */

/**
 * ---------------------------------------------------------------------------------------
 * @section       Form baseline
 *
 * Baseline styles for standard form elements
 */

/* Clears floats */
form {
   clear: both;
}

/* Change fonts */
label {
   font-weight: bold;
}
optgroup {
   font-style: italic;
}

/* Adjusts baseline of input fields and label */
button
input, 
label, 
select, 
textarea {
   margin-bottom: 0.25em;
   margin-left: 0;
   vertical-align: middle;
}

/* Add border to get same visual appearance to all input elements */
select,
textarea {
   border: 1px solid #000;
}

/* Fieldset */
fieldset {
   
   /* Clear floats */
   clear: both;
   
   /* Change font */
   font-weight: bold;

   /**
    * Sets border styles (because of meyer reset), paddings and encloses floating boxes 
    * within fieldset using overflow method
    */

   border: 1px solid #000;
   padding: 1em;
   margin-bottom: 1em;

   /**
    * @affected Opera <= 8.5
    */
   overflow: hidden; /* Opera <= 8.5 */

   /**
    * @workaround Wrong padding behaviour of fieldset in IE. (hack works only with one 
    * setting per element)
    * @affected IE 8
    */
   padding: ~"0 1em 1em 1em\0/";

   /**
    * @workaround Wrong padding behaviour of fieldset in IE (hack works only with one 
    * setting per element)
    * @affected IE 8
    */
   legend {
      margin-top: ~"-1em\0/";
      padding-top: ~"1em\0/";
      padding-bottom: ~"1em\0/";
   }
}

/* Fieldset workarounds */
* html fieldset {

   /**
    * @workaround Wrong padding behaviour of fieldset in IE.
    * @affected IE 5, 6
    */
   padding: 0 1em 1em 1em;
   margin-top: -1em; /* Margin-top corrects additional padding of legend - see below */

   legend {
   
      /**
       * Change color of fieldset
       * @affected IE 5, 6
       */
      color: #000;

      /**
       * @workaround Wrong padding behaviour of fieldset in IE
       * @affected IE 5, 6
       */
      margin-left: -0.5em;
      padding-top: 1em;
      padding-bottom: 1em;
      padding-left: 0;
   }
}

/* Fieldset workarounds */
*:first-child+html fieldset {

   /**
    * @workaround Wrong padding behaviour of fieldset in IE.
    * @affected IE 7
    */
   padding: 0 1em 1em 1em;

   /**
    * @workaround Wrong padding behaviour of fieldset in IE
    * @affected IE 7
    */
   legend {
      margin-left: -0.5em;
      margin-top: -1em;
      padding-top: 1em;
      padding-bottom: 1em;
      padding-left: 0;
   }
}

/**
 * ---------------------------------------------------------------------------------------
 * @section       Form elements
 *
 * Form elements
 */

/* Form */
.flz_form { 

   /* Textbox */
   input[type="text"],
   input[type="password"] {
      background-color: #fff;
      border: 1px solid #000;
      display: block;
      width: 99.4%;
      /* Fix overlap bug in iOS by removing horizontal spacing */
      padding-left: 0;
      padding-right: 0; 
   }
   
   /* Label, Selectbox */
   label,
   select {
      display: block;
      width: 100%;
   }

   /* Textarea */
   textarea {
      display: block;
      width: 99.4%;
   }

   /* Label in combination with checkbox or radio should be inline */
   input[type="checkbox"] + label,
   input[type="radio"] + label {
      display: inline;
      width: auto;
   }


   /* Marker for mandatory fields */
   .flz_mandatory {
      background-color: yellow;
   }

   /* Marker for readonly fields */
   .flz_readonly {
      background-color: #efefef;
      color: #aaa;
   }

   /**
    * Label in combination with checkbox or radio should be inline
    * @workaround Handle situations when label comes before radiobutton, checkbox and to
    *             support inline labels in combination with checkbox in IE 5, 6
    * @affected all browsers
    */

   /* Separate inline class (for IE 5,6 and when label comes before radiobutton, checkbox) */
   .flz_inline {
      display: inline;
      width: auto;
   }

   /* Combobox marker classes to combine fields with images in one line (e.g. date field with 
      date picker image) */
   .flz_combobox {
      position: relative;
      padding-right: 2em;
   
      a, 
      span {
         position: absolute;
         bottom: 0;
         right: 0;
      }
   }
}

/* Form workarounds */
* html .flz_form {

   /**
    * @workaround Differentiate input type text due to lack of selector support
    * @affected IE 5, 6
    */
   .flz_textbox {
      background-color: #fff;
      border: 1px solid #000;
      display: block;
      width: 99.4%;
   }

   /**
    * @workaround Correct margins of input type text and textareas within blocked forms
    * @affected IE 5, 6
    */
   .flz_textbox, 
   textarea {
      margin-right: -10px;
   }

   /**
   * @workaround Correct margins in combobox 
   * @affected IE 5, 6
   */
   .flz_combobox {
      float: left;
   }
}

/* Buttons (should also work outside of .flz_form) */
input[type="button"],
input[type="submit"],
input[type="reset"],
button {
   padding: 0.25em 0.35em;
}

/* Button workarounds */
* html .flz_button {

   /**
    * @workaround Differentiate input type button, submit
    * @affected IE 5, 6
    */
   padding: 0.25em 0.35em;

   /**
    * @workaround Omit too much left/right padding
    * @affected IE 5, 6
    */
   overflow: visible;
   padding: 0.25em 0.5em;

   /**
    * @workaround Collapse tabele cell around button
    * @affected IE 5+, 6
    */
   width: 1;
}

/* Button workarounds */
*:first-child+html input[type=button],
*:first-child+html input[type=submit],
*:first-child+html input[type=reset],
*:first-child+html button {

   /**
    * @workaround Omit too much left/right padding
    * @affected IE 7
    */
   overflow: visible;
   padding: 0.25em 0.5em;

   /**
    * @workaround Collapse table cell around button
    * @affected IE 7
    */
   width: 1;
}

/* Special class for custom buttons that removes unnecessary formatting */
.flz_custombutton {
   background: transparent;
   border: 0;
}
